<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>List Benchmarks</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

    body {
      font-family: 'Source Sans Pro', sans-serif;
      color: #222222;
      padding: 0 2em;
    }

    table {
      border: 2px solid white;
      border-collapse: collapse;
    }

    table td,
    table th {
      text-align: right;
      padding: .2em .3em;
    }

    table tr td:first-child {
      padding: .2em .5em;
    }

    table td:nth-of-type(odd),
    table th:nth-of-type(odd) {
      background: #f5f5f5;
    }

    table tr:nth-of-type(even) td {
      background: white;
    }

    table th,
    table td {
      border: 2px solid white;
    }

    #wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .benchmark-wrapper {
      display: flex;
      flex-direction: column;
    }

    @media only screen and (min-width: 1000px) {
      .benchmark-wrapper {
        flex-direction: row;
      }
    }

    .benchmark-wrapper table {
      margin-left: 1em;
    }

    .fastest, .slower {
      font-size: 0.7em;
    }

    h1,
    h2 {
      font-weight: 400;
    }

    h1 {
      font-size: 3em;
    }

    .benchmark {
      padding-bottom: 2em;
      margin-bottom: 2em;
      border-bottom: 1px solid #cccccc;
    }

    .benchmark-name {
      display: inline;
      font-size: 2.4em;
    }

    .benchmark-description {
      padding-left: .5em;
      display: inline;
      color: #555555;
    }
  </style>
</head>

<body>
  <script src="bundle.js"></script>
</body>

</html>